@extends('layouts.default')

@section('title', '维护考核量表')

@push('scripts')
<script>
    var pageTitle = '';
    var ScaleId = "{{ request()->get('id', 0) }}";
    layui.use(['layer','form','table','upload','laytpl','laydate','element','laypage'], function(){
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var upload = layui.upload;
        var laytpl = layui.laytpl;
        var laydate = layui.laydate;
        var element = layui.element;
        var laypage = layui.laypage;

        renderSelect();

        laydate.render({
            elem: '#award-date'
            ,type: 'date'
            ,trigger: 'click'
        });

        // 提交
        form.on('submit(sub)', function(datas) {
            let data = datas.field;
            
            editScale(data, function(res) {
                if(res.code == '1'){
                    layer.msg('提交成功', {icon: 6, time: 1000}, function(){
                        parent.layui.admin.refresh(5);
                        parent.layui.admin.closeAndJumpTab(5);
                    });
                }else{
                    layer.msg(res.msg, {icon: 5,shift : 6});
                }
            });
            
            return false;
        });

        //下拉框初始化
        async function renderSelect(){
            await renderDicSelect();
            await renderTermSelect();
            pageInit();
        }

        //字典下拉框数据渲染
        function renderDicSelect() {
            return new Promise((resolve) => {
                getDicListByCode({'diccode': 'LBCJ'}, function (res){
                    if(res.code === 1) {  
                        let d = res.data;

                        $('[data-role=lbcjList]').empty().append('<option value="">请选择</option>');
                        for (var i in d) {
                            $('[data-role=lbcjList]').append('<option value="' + d[i].itemcode + '">' + d[i].itemname + '</option>');
                        }
                        
                        form.render();

                        resolve();
                    }
                });
            });
        }

        //学期下拉框数据渲染
        function renderTermSelect() {
            return new Promise((resolve) => {
                getTermData({},function(res){
                    if(res.code == 1){
                        $('[data-role=termList]').empty().append('<option value="">请选择</option>');
                        for(var i in res.data){
                            $('[data-role=termList]').append('<option value="'+res.data[i].id+'">' + res.data[i].select_year + '</option>');
                        }
                                      
                        form.render('select');

                        resolve();
                    }
                });  
            });
        }

        //页面初始化
        function pageInit() {
            getScaleById({id: ScaleId}, function(res) {
                if(res.code === 1) { 
                    let Scale = res.data.scale;

                    form.val('editForm', {
                        'id': Scale ? Scale.id : 0,
                        "term_id": Scale ? Scale.term_id : '',
                        "name": Scale ? Scale.name : '',
                        "tier_code": Scale ? Scale.tier_code : '',
                        "level_code": Scale ? Scale.level_code : '',
                        "score": Scale && Scale.score > 0 ? Scale.score : '',
                        "enable": Scale ? Scale.enable : '',
                        "remark": Scale ? Scale.remark : '',
                        "links": Scale ? Scale.links : '',
                        "type": Scale ? Scale.type : '',
                        "created_at": Scale ? Scale.created_at : ''
                    });
                    
                    switch(Scale.type) {
                        case 1:
                            pageTitle = '岗位竞聘'
                            break;
                        case 2:
                            pageTitle = '年度考核'
                            break;
                        case 3:
                            pageTitle = '教研活动'
                            break;
                        
                    }

                    $(".edit-title").html(pageTitle);
                    $('#nickname').text(Scale.opt_name);
                    
                    //文件
                    if(Scale.files_array.length>0){
                        // var getTpl = demo.innerHTML
                        //     ,view = document.getElementById('files');

                        // laytpl(getTpl).render(Scale.files_array, function(html){
                        //     view.innerHTML = html;                              
                        // });

                        let fileShowTpl = fileShowDemo.innerHTML
                            ,fileShow = document.getElementById('files');
                            
                        laytpl(fileShowTpl).render(Scale.files_array, function(html){
                            fileShow.innerHTML = html;                           
                        });
                    }   

                    $("#edit-form").find('input,select,textarea').attr("disabled","disabled");

                    form.render();
                }
            });
        }

        //演示多文件列表
        var uploadListIns = upload.render({
            elem: '#testList'
            ,elemList: $('#demoList') //列表元素对象
            ,url: "{{route('uploads.upload')}}" //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
            ,headers: {"X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr('content')}
            ,accept: 'file'
            // ,exts: 'pdf|jpg|png|jpeg|zip|7z|rar|doc|docx|xlsx'
            ,size: 307200
            ,multiple: true
            ,number: 0
            ,auto: false
            ,bindAction: '#testListAction'
            ,choose: function(obj){   
                var that = this;
                var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
                //读取本地文件
                obj.preview(function(index, file, result){
                    if($('#demoList').find('tr').length > 4){
                        layer.msg('多选文件数量不能超过5个', {time: 2000,icon: 5,shift: 6});return false;
                    }
                    var tr = $(['<tr id="upload-'+ index +'">'
                        ,'<td>'+ file.name +'</td>'
                        ,'<td>'+ (file.size/1014).toFixed(1) +'kb</td>'
                        ,'<td><div class="layui-progress" lay-filter="progress-demo-'+ index +'"><div class="layui-progress-bar" lay-percent=""></div></div></td>'
                        ,'<td>'
                            ,'<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>'
                            ,'<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'
                        ,'</td>'
                        ,'<input type="hidden" name="files[]" value="">'
                        ,'</tr>'].join(''));
                    
                    //单个重传
                    tr.find('.demo-reload').on('click', function(){
                        obj.upload(index, file);
                    });
                    
                    //删除
                    tr.find('.demo-delete').on('click', function(){
                        delete files[index]; //删除对应的文件
                        tr.remove();
                        uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
                    });           
                    that.elemList.append(tr);    
                    //element.render('progress'); //渲染新加的进度条组件
                });
            }
            ,done: function(res, index, upload){ //成功的回调
                var that = this;
                var tr = that.elemList.find('tr#upload-'+ index)
                    ,tds = tr.children();
                //tds.eq(3).html(''); //清空操作
                delete this.files[index]; //删除文件队列已经上传成功的文件

                if(res.code == 1){
                    tr.find('input').val(JSON.stringify(res.data));
                    tds.eq(3).find('.demo-reload').addClass('layui-hide');
                }
                return;
                this.error(index, upload);
            }
            ,allDone: function(obj){ //多文件上传完毕后的状态回调
                console.log(obj)
            }
            ,error: function(index, upload){ //错误回调
                var that = this;
                var tr = that.elemList.find('tr#upload-'+ index)
                    ,tds = tr.children();
                tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
            }
            ,progress: function(n, elem, e, index){ //注意：index 参数为 layui 2.6.6 新增
                element.progress('progress-demo-'+ index, n + '%'); //执行进度条。n 即为返回的进度百分比
            }
        });

        //表单重置
        // $(".reset-form").on('click', function() {
        //     $("#member-input").remove();
        // });
        //页面返回
        $("#back-btn").on('click', function() {
            parent.layui.admin.closeAndJumpTab(5);
        });
        $(".copy-btn").on('click', function() {
            copyText($(this).prev('input').val());
        });
    });
</script>
<script id="demo" type="text/html">
    <ul style="line-height: 38px;"> 
        @{{#  layui.each(d, function(index, item){ }}
        <li >
            <a style="color:#0e90d2;" target="_blank" href="@{{item.url}}" >@{{item.file_name}} </a>
            <a style="color:#74B8FF" href="@{{item.url}}" download="@{{item.file_name}}" >
                <span class="icon pear-icon pear-icon-download" style="color:#74B8FF;margin-left:10px;" ></span>
            </a>
        </li>  
        @{{#  }); }}   
    </ul>
</script>
@endpush

@section('content')
<style>
    .layui-row{margin-bottom: 20px;}
    .opt-area{float: right;padding: 10px 50px;margin-bottom: 20px;}
</style>

<div class="layui-row">
    <div class="layui-panel">
        <div class="layui-card-header" style="font-weight: bold"><span class="edit-title"></span> - 基本信息</div>
        <form class="layui-form" action="" id="edit-form" lay-filter="editForm">
            <div class="layui-row">
            <div class="layuik-form-item layuik-columns-two">
                    <div class="layuik-inline">
                        <label class="layuik-form-label"><i class="redstar">*</i>量表名称：</label>
                        <div class="layuik-input-inline">
                            <input type="text" name="name" required lay-verify="required" placeholder="请输入" lay-reqText="不能为空" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layuik-inline">
                        <label class="layuik-form-label"><i class="redstar">*</i>分类：</label>
                        <div class="layuik-input-inline">
                            <select name="type"  lay-verify="required" lay-reqText="不能为空">
                                <option value="" >请选择</option>
                                <option value="1" >岗位竞聘</option>
                                <option value="2" >年度考核</option>
                                <option value="3" >教研活动</option>
                            </select>
                        </div>
                    </div>
                </div> 
                <div class="layuik-form-item layuik-columns-two">
                    <div class="layuik-inline">
                        <label class="layuik-form-label"><i class="redstar">*</i>层级：</label>
                        <div class="layuik-input-inline">
                            <select name="tier_code" lay-filter="lbcjList" data-role="lbcjList" lay-verify="required" lay-reqText="不能为空"></select>
                        </div>
                    </div>
                    <div class="layuik-inline">
                        <label class="layuik-form-label"><i class="redstar">*</i>状态：</label>
                        <div class="layuik-input-inline">                            
                            <select name="enable" class="layui-select" lay-verify="required" lay-reqText="状态不能为空">
                                <option value="">请选择</option>
                                <option value="1">正常</option>
                                <option value="2">禁用</option>
                            </select>                     
                        </div>
                    </div>
                </div> 
                <div class="layuik-form-item">
                    <div class="layuik-inline">
                        <label class="layuik-form-label">说明：</label>
                        <div class="layuik-input-inline">
                            <textarea name="remark" id="" rows="3" class="layui-textarea" placeholder="请输入"></textarea>
                        </div>
                    </div>
                </div>
                <div class="layuik-form-item">
                    <div class="layuik-inline">
                        <label class="layuik-form-label">证明材料：</label>
                        <div class="layuik-input-inline">
                            <div id="files" ></div>
                        </div>
                    </div>         
                </div>
                <div class="layuik-form-item layuik-columns-two">
                    <div class="layuik-inline">
                        <label class="layuik-form-label"><i class="redstar">*</i>创建人：</label>
                        <div class="layuik-input-inline">
                        <span style="line-height: 38px;border: 1px solid #eee;padding: 10px;" id="nickname"></span>
                        </div>
                    </div>
                    <div class="layuik-inline">
                        <label class="layuik-form-label"><i class="redstar">*</i>创建时间：</label>
                        <div class="layuik-input-inline">
                            <input disabled type="text" name="created_at" id="created_at" required lay-verify="required" placeholder="" lay-reqText="" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>   
</div>

<div class="layui-row">
    <div class="layui-panel">
        <div class="layui-card-header" style="font-weight: bold"><span class="edit-title"></span> - 内容维护</div>
        
        @if($_GET['type'] == 2)
        @include('systems.scales.check')
        @else
        @include('systems.scales.detail')
        @endif
        
      
      
    </div>  
    
</div>


<script id="demo" type="text/html">
@{{#  layui.each(d, function(index, item){ }}
@{{#  if(item){ }}
    <tr id="upload-@{{index}}">
        <td><a style="color: #0e90d2" target="_blank" href="@{{item.url}}">@{{item.file_name}}</a></td>
        <td style="text-align: center;">
            <a href="@{{item.url}}" download="@{{item.file_name}}" class="layui-btn layui-btn-normal layui-btn-xs"> 下载 </a>
            <input type="hidden" name="files[]" value="@{{JSON.stringify(item)}}">
        </td>
    </tr>
@{{#  } }}
@{{#  }); }}
</script>

<script id="fileShowDemo" type="text/html">
<ul >
@{{#  layui.each(d, function(index, item){ }}
@{{#  if(item){ }}
<!-- <li style="margin-bottom: 5px;">
    <a style="color:#74B8FF" href="@{{item.url}}" download="@{{item.file_name}}" >
        @{{item.file_name}} 
        <span class="icon pear-icon pear-icon-download" style="color:#74B8FF;margin-left:10px;" ></span>
    </a>
</li> -->
<li style="min-width: 200px;margin: 5px;">
    <a style="color: #0e90d2;" target="_blank" title="@{{item.file_name}}" href="@{{item.url}}">
        <span style="display: inline-block;max-width: 90%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">@{{item.file_name}}</span>
    </a>
    
    <a style="color:#74B8FF" href="@{{item.url}}" download="@{{item.file_name}}">
        <span class="icon pear-icon pear-icon-download" style="color:#74B8FF;margin-left:10px;" ></span>
    </a>
</li>
@{{#  } }}
@{{#  }); }}
</ul>
</script>
@endsection
